<template lang="pug">
  .container
    div.table-empty
      s-table(
        ref="table"
        :reqUrl="tableObj.url"
        :column="tableObj.column"
        :filterProps="{fields: tableObj.filterItems, showBtns: false}"
        :queryPropsParams="{areaId: curArea.areaId}"
      )
        .table-operator(slot="table-operator")
          el-button.gradientVertical(size="large" @click="addHandle('')" round) 新增
        template(slot="isPublic" slot-scope="text, scope")
          el-tag(:type="text ? 'success' : 'danger'" size="mini" class="mr5" effect="plain") {{text ? '是' : '否'}}
        template(slot="cameraUrls" slot-scope="text, scope")
          p(v-for="url in (text || [])" :key="url")
            a-image(:url="url" :table="true" defaultImage="")
        template(slot="beginMonth" slot-scope="text, scope") {{text}} ~ {{scope.endMonth}}
        template(slot="action" slot-scope="text, scope")
          el-link(@click="addHandle(scope.id)" type="success") 修改
    teach-area-modal(:visible.sync="modalObj.visible" :id="modalObj.id" @sureHandle="() => refreshTable(true)")
</template>
<script>
import { mapGetters } from 'vuex'
import AImage from '@/components/Basic/Image'
import TeachAreaModal from '@/components/Business/TeachAreaModal'
import { seachConfig, column } from './config'

export default {
  components: {
    TeachAreaModal,
    AImage
  },
  data () {
    return {
      tableObj: {
        url: 'web/teaching_area/page_by_area',
        column,
        filterItems: seachConfig
      },
      modalObj: {
        visible: false,
        id: '',
        info: {}
      }
    }
  },
  computed: {
    ...mapGetters(['curArea'])
  },
  created () {
  },
  methods: {
    refreshTable (flag = false) {
      this.$refs.table.refresh(flag)
    },
    addHandle (id) {
      this.modalObj = {
        visible: true,
        id
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.container{
  padding: 30px;
  background: #FFFFFF;
}
</style>
